<template>
  <div class="imagedeep">
    <el-image
      :src="url"
      :style="{ width: imgWidth + 'px', height: imgHeight + 'px' }"
    >
      <div slot="error">
        <!-- <img src="https://z3.ax1x.com/2021/11/19/Ib4IVs.png" /> -->
        <img :src="$constant.ImgError" />
      </div>
      <div slot="placeholder">
        <!-- <img src="https://z3.ax1x.com/2021/11/16/IRL9rq.png" /> -->
        <img :src="$constant.ImgNowLoading" />
      </div>
    </el-image>
  </div>
</template>

<script>
export default {
  name: "GlobalImageDeep",
  props: {
    imgWidth: {
      required: true,
      type: Number,
      default: 224,
    },
    imgHeight: {
      required: true,
      type: Number,
      default: 224,
    },
    url: {
      required: true,
      type: String,
    },
  },
  components: {},
  data() {
    return {};
  },
  created() {},
  methods: {},
  computed: {},
};
</script>

<style lang="less" scoped>
.imagedeep {
  /deep/ .el-image {
    > div {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
</style>
